<template>
  <component
    :is="comp"
    ref="$form"
    :model-form="model"
    :disabled="type === 'view'"
    :width="900"
    @submit="handleSubmit"
  >
    <n-form-item label="商机名称" path="name" :rule="{ required: true, message: '请输入商机名称' }">
      <n-input v-model:value="model.name" maxlength="50" show-count clearable />
    </n-form-item>
    <n-form-item label="对接客户" path="customerManagementDtoList">
      <Customer v-model="model.customerManagementDtoList" parent-key="customerManagementDtoList" />
    </n-form-item>
    <n-form-item label="商机描述" path="resume">
      <n-input
        v-model:value="model.resume"
        type="textarea"
        maxlength="300"
        show-count
        clearable
        :autosize="{
          minRows: 3,
        }"
      />
    </n-form-item>
    <n-form-item label="接入时间" path="abutmentTime">
      <n-date-picker
        v-model:formatted-value="model.abutmentTime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm"
        :time-picker-props="{ format: 'HH:mm' }"
        placeholder="选择时间"
        clearable
      />
    </n-form-item>
    <n-form-item label="是否转项目" path="isChangeProject">
      <n-radio-group v-model:value="model.isChangeProject" :disabled="lockIsChangeProject">
        <n-radio :value="false">否</n-radio>
        <n-radio :value="true">是</n-radio>
      </n-radio-group>
    </n-form-item>
    <n-form-item
      v-if="model.isChangeProject && type === 'add'"
      label="项目类型"
      path="projectType"
      :rule="[{ required: true, message: '请选择项目类型！' }]"
    >
      <AsyncSelect v-model:value="model.projectType" options="PROJECT_TYPE" multiple />
    </n-form-item>
    <n-form-item label="附件" path="refFileDtoList">
      <FileUpload v-model="model.refFileDtoList" />
    </n-form-item>
    <n-form-item
      v-if="type === 'edit' && model.phase !== 'OPPORTUNITY_PHASE_PROJECT'"
      label="商机阶段"
      path="phase"
    >
      <n-radio-group v-model:value="model.phase">
        <n-radio value="OPPORTUNITY_PHASE_FOLLOW">正常推进</n-radio>
        <n-radio value="OPPORTUNITY_PHASE_CLOSE">关闭商机</n-radio>
      </n-radio-group>
    </n-form-item>
  </component>
</template>
<script setup lang="jsx">
import MyModal from '@/components/my/MyModal.vue'
import MyDrawer from '@/components/my/MyDrawer.vue'
import * as nicheApi from '@/api/niche'
import { useCrudPro } from '@/hooks/useCrudPro'
import { formatToIds } from '@/utils/format'
defineOptions({ name: 'NicheForm' })
const props = defineProps({
  // modal|drawer
  mode: {
    type: String,
    default: 'modal',
  },
})
const comp = computed(() => {
  if (props.mode === 'modal') {
    return MyModal
  } else {
    return MyDrawer
  }
})
const emits = defineEmits(['result'])
const lockIsChangeProject = ref(false)
const { type, model, $form, handleAdd, handleEdit, handleSubmit, handleDelete } = useCrudPro({
  name: '商机',
  initForm: {
    id: null,
    name: null,
    customerManagementDtoList: [],
    resume: null,
    abutmentTime: null,
    isChangeProject: false,
    projectType: null,
    refFileDtoList: [],
    phase: null,
  },
  apis: {
    add: nicheApi.add,
    edit: nicheApi.edit,
    del: (id) => nicheApi.del({ id }),
    info: ({ id }) =>
      nicheApi.info({ id }).then((res) => {
        res.data.isChangeProject = res.data.phase === 2
        lockIsChangeProject.value = res.data.phase === 2
        return res.data
      }),
  },
  onShow() {
    lockIsChangeProject.value = false
  },
  formatParams(params) {
    params.projectType = formatToIds(params.projectType)
    return params
  },
  handleChange(type) {
    emits('result', type)
  },
})
defineExpose({
  handleAdd,
  handleEdit,
  handleDelete,
})
</script>
<style lang="scss" scoped></style>
